<script setup lang="ts">
import { NButton, NDataTable, NPagination, type DataTableColumns } from 'naive-ui'
import { useRoute } from 'vue-router'
import { sendRequest } from '@/utils/api'
import { h, onMounted, reactive, ref } from 'vue'
import type { HttpResponse, HttpResponsePagination } from '@/utils/http'
import type { BatchInfoModel, CollectingTableRowModel } from '@/api/batch'
import { useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// 批次信息
const batchDetail = ref({} as BatchInfoModel)
const queryDjBatchDetail = async () => {
  try {
    const [error, res] = await sendRequest<HttpResponse<BatchInfoModel>>({
      module: 'batch',
      api: 'formInfo',
      override: {
        params: {
          batchId: route.params.id
        }
      }
    })
    if (error) throw error
    if (res.code !== 0) throw new Error(res.msg)
    batchDetail.value = res.data
    if (res.data.clueIds) queryTableData()
  } catch (error) {
    console.error(error)
  }
}

// 征集品信息
const tableData = ref<CollectingTableRowModel[]>([])
const tableLoading = ref(false)
const columns: DataTableColumns<CollectingTableRowModel> = [
  {
    title: '序号',
    key: 'index',
    width: 80,
    align: 'center',
    render: (_, index) => index + 1
  },
  {
    title: '征集品名称',
    key: 'itemName',
    align: 'center'
  },
  {
    title: '类型',
    key: 'itemTypeName',
    align: 'center'
  },
  {
    title: '征集方式',
    key: 'collectTypeName',
    align: 'center'
  },
  {
    title: '接收时间',
    key: 'receiveTime',
    align: 'center'
  },
  {
    title: '接收人',
    key: 'receiveUser',
    align: 'center'
  },
  {
    title: '操作',
    key: 'action',
    width: 200,
    align: 'center',
    fixed: 'right',
    render: (e) => [
      h(
        NButton,
        {
          color: '#6CB187',
          quaternary: true,
          size: 'small',
          onClick: () => {
            router.push({
              name: 'collectWDetail',
              params: {
                id: e.id
              },
              query: {
                type: 'detail',
                redirect: route.fullPath,
                fromBatchEdit: 'true'
              }
            })
          }
        },
        { default: () => '详情' }
      )
    ]
  }
]
const paginationReactive = reactive({
  page: 1,
  pageSize: 5,
  showSizePicker: true,
  pageSizes: [5, 10, 20, 40],
  itemCount: 0,
  onChange: (page: number) => {
    paginationReactive.page = page
    queryTableData()
  },
  onUpdatePageSize: (pageSize: number) => {
    paginationReactive.pageSize = pageSize
    paginationReactive.page = 1
    queryTableData()
  }
})
const queryTableData = async () => {
  try {
    if (!batchDetail.value.clueIds.length) return (tableData.value = [])
    tableLoading.value = true
    const [error, res] = await sendRequest<HttpResponsePagination<CollectingTableRowModel>>({
      module: 'batch',
      api: 'collectingList',
      override: {
        data: {
          clueIds: batchDetail.value.clueIds,
          limit: paginationReactive.pageSize,
          page: paginationReactive.page
        }
      }
    })
    if (error) throw error
    if (res.code !== 0) throw new Error(res.msg)
    tableData.value = res.data.list
    paginationReactive.itemCount = res.data.totalCount
  } catch (error) {
    console.log(error)
  } finally {
    tableLoading.value = false
  }
}

onMounted(() => {
  queryDjBatchDetail()
})
</script>

<template>
  <div class="bd-title">征集品信息</div>
  <div class="bd-card bd-table">
    <NDataTable
      :data="tableData"
      :columns="columns"
      :loading="tableLoading"
      bordered
    />
    <NPagination
      show-size-picker
      show-quick-jumper
      :page-sizes="paginationReactive.pageSizes"
      :item-count="paginationReactive.itemCount"
      :page="paginationReactive.page"
      :page-size="paginationReactive.pageSize"
      @update:page="paginationReactive.onChange"
      @update:page-size="paginationReactive.onUpdatePageSize"
    >
      <template #suffix>页</template>
      <template #prefix>
        <span style="font-size: 14px">共{{ paginationReactive.itemCount }}条</span>
      </template>
    </NPagination>
  </div>
</template>

<style lang="scss" scoped>
.bd-title {
  font-size: 26rem;
  margin-bottom: 30rem;
  color: #048c5e;
  line-height: 1;
}

.bd-card {
  padding: 20rem;
  background-color: #e1e1e1;
}

.bd-table {
  display: flex;
  flex-direction: column;
  gap: 15rem 0;
}
</style>
